<template>
    <div class="specDialog">
        <el-dialog width="60%" @close="dialogClose" :visible="visible" :append-to-body="true" title="选择要生成的规格">
            <div  v-if="editFrom.length">
                <div v-for="(item, i) in editFrom" :key="item.id">
                    <p>{{item.name}}:</p>
                    <el-checkbox-group v-model="checkList[i]">
                        <el-checkbox :label="items.valueStr" v-for="(items, j) in item.valueList" @change="change(i, j)" :key="j"></el-checkbox>
                    </el-checkbox-group>
                </div>

                <div>
                    <el-button size="mini" type="primary" @click="clearBoth">清空</el-button>
                    <el-button size="mini" type="primary" @click="save">保存</el-button> 
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
    specs,
} from "@/api/agri-product/goodsType";
export default {
    name: 'specDialog',
    props: ['visible', 'typeId', 'editSpecData'],
    data () {
        return {
            editFrom: [],
            checkList: [],
            saveList: [],
            flag: true, // 用来判断当前是勾选还是取消勾选
        }
    },
    created () {
        
    },
    methods: {
        dialogClose () {
            this.$emit('cancel')
        },
        change (i, j) {
            this.editFrom[i].valueList[j].flag = !this.editFrom[i].valueList[j].flag;
        },
        //清空勾选
        clearBoth () {
            this.editFrom.forEach(item => {
                item.valueList.forEach(items => {
                    items.flag = false;
                })
            })
            this.checkList.forEach((item, i) => {
                this.checkList[i].splice(0, this.checkList[i].length);
            })
            console.log(this.editFrom, this.checkList)
        },
        save () {
            let list = [];
            this.editFrom.forEach((item, i) => {
                list[i] = {};
                list[i].name = item.name;
                list[i].value = [];
                item.valueList.forEach(items => {
                    items.flag && list[i].value.push(items)
                })
            })
            //去除空数据
            let newlist = [];
            list.forEach(item => {
                item.value.length && newlist.push(item)
            })
            console.log(newlist, 'newlist000')
            this.$emit('specList', newlist)
        },
        // 规格列表
        skuItem () {
            specs(this.typeId).then(res => {
                console.log(res.data.data, '11111')
                if (!this.editSpecData.length) {
                    res.data.data.records.forEach((item, i) => {
                        this.checkList[i] = [];
                        item.valueList.forEach(items => {
                            //保存点击状态
                            items.flag = false;
                        })
                    })
                } else {
                    res.data.data.records.forEach((item, i) => {
                        this.checkList[i] = [];
                        this.$set(this.checkList,i, [])
                        item.valueList.forEach(items => {
                            let flag = this.checkId(items.attrId, items.id);
                            console.log(flag, 'flag')
                            if (flag) {
                                items.flag = true;
                                this.checkList[i].push(items.valueStr)
                            }
                        })
                    })
                }
                
                console.log(this.checkList,this.editSpecData.length, 'this.checkList')
                this.editFrom = res.data.data.records;
            })
        },
        checkId (id1, id2) {
            let flag = true;
            this.saveList.forEach(item => {
                if (item.attrId === id1 && item.id === id2 || item.attrValueId === id2) {
                    flag = false
                    return
                }
            })
            return !flag;
        }
    },
    watch: {
        visible (cur) {
            this.editFrom = []
            if (cur) {
                this.checkList = [];
                if (this.editSpecData.length) {
                    let list = JSON.parse(JSON.stringify(this.editSpecData));
                    console.log(list, 'list')
                    this.saveList = [];
                    list.forEach(item => {
                        //添加
                        if (item.name) {
                            this.saveList.push(...item.value)
                        //编辑
                        } else {
                            this.saveList.push(item)
                        }
                    })
                }
                this.skuItem()
            }
        },
        // typeId () {
        //     if (this.editSpecData.length) {
        //         this.saveList = JSON.parse(JSON.stringify(this.editSpecData));
        //         return;
        //     }
        //     this.skuItem()
        // },
        checkList (cur, pre) {
            console.log(cur, pre, 'cur, pre')
        }
    }
}
</script>

<style scoped>

</style>